<template>
  <div class="vue-utils-demo">
    <h1>Vue Utils Chic 使用示例</h1>
    
    <!-- 日期格式化示例 -->
    <section class="demo-section">
      <h2>日期工具</h2>
      <div class="demo-item">
        <label>当前时间格式化：</label>
        <span>{{ formattedDate }}</span>
      </div>
      <div class="demo-item">
        <label>相对时间：</label>
        <span>{{ relativeTime }}</span>
      </div>
    </section>

    <!-- 字符串处理示例 -->
    <section class="demo-section">
      <h2>字符串工具</h2>
      <div class="demo-item">
        <label>首字母大写：</label>
        <span>{{ capitalizedText }}</span>
      </div>
      <div class="demo-item">
        <label>驼峰命名：</label>
        <span>{{ camelCaseText }}</span>
      </div>
      <div class="demo-item">
        <label>邮箱验证：</label>
        <input v-model="email" placeholder="输入邮箱" />
        <span :class="{ valid: isEmailValid, invalid: !isEmailValid }">
          {{ isEmailValid ? '✓ 邮箱格式正确' : '✗ 邮箱格式错误' }}
        </span>
      </div>
    </section>

    <!-- 数组处理示例 -->
    <section class="demo-section">
      <h2>数组工具</h2>
      <div class="demo-item">
        <label>原数组：</label>
        <span>{{ originalArray }}</span>
      </div>
      <div class="demo-item">
        <label>去重后：</label>
        <span>{{ uniqueArray }}</span>
      </div>
      <div class="demo-item">
        <label>分组结果：</label>
        <pre>{{ JSON.stringify(groupedArray, null, 2) }}</pre>
      </div>
    </section>

    <!-- 对象处理示例 -->
    <section class="demo-section">
      <h2>对象工具</h2>
      <div class="demo-item">
        <label>深拷贝测试：</label>
        <button @click="testDeepClone">测试深拷贝</button>
        <span>{{ deepCloneResult }}</span>
      </div>
    </section>

    <!-- 存储示例 -->
    <section class="demo-section">
      <h2>存储工具</h2>
      <div class="demo-item">
        <label>存储数据：</label>
        <input v-model="storageKey" placeholder="存储键" />
        <input v-model="storageValue" placeholder="存储值" />
        <button @click="saveToStorage">保存到localStorage</button>
        <button @click="loadFromStorage">从localStorage读取</button>
        <span>{{ loadedValue }}</span>
      </div>
    </section>

    <!-- 格式化示例 -->
    <section class="demo-section">
      <h2>格式化工具</h2>
      <div class="demo-item">
        <label>数字格式化：</label>
        <span>{{ formattedNumber }}</span>
      </div>
      <div class="demo-item">
        <label>货币格式化：</label>
        <span>{{ formattedCurrency }}</span>
      </div>
      <div class="demo-item">
        <label>文件大小：</label>
        <span>{{ formattedFileSize }}</span>
      </div>
    </section>

    <!-- 文件工具示例 -->
    <section class="demo-section">
      <h2>文件工具</h2>
      <div class="demo-item">
        <label>文件下载：</label>
        <button @click="downloadTextFile">下载文本文件</button>
        <button @click="downloadJSONFile">下载JSON文件</button>
      </div>
      <div class="demo-item">
        <label>文件上传：</label>
        <input type="file" @change="handleFileUpload" multiple />
        <div v-if="uploadProgress !== null" class="upload-progress">
          上传进度: {{ uploadProgress }}%
        </div>
      </div>
      <div class="demo-item">
        <label>文件选择：</label>
        <button @click="selectFiles">选择文件</button>
        <span v-if="selectedFiles.length > 0">
          已选择 {{ selectedFiles.length }} 个文件
        </span>
      </div>
      <div class="demo-item">
        <label>文件验证：</label>
        <input type="file" @change="validateSelectedFile" accept="image/*" />
        <div v-if="validationResult" :class="validationResult.isValid ? 'valid' : 'invalid'">
          {{ validationResult.isValid ? '✓ 文件验证通过' : '✗ ' + validationResult.errors.join(', ') }}
        </div>
      </div>
      <div class="demo-item">
        <label>拖拽上传区域：</label>
        <div 
          ref="dropZone" 
          class="drop-zone"
          :class="{ 'drag-over': isDragOver }"
        >
          拖拽文件到这里
        </div>
      </div>
    </section>

    <!-- 请求控制示例 -->
    <section class="demo-section">
      <h2>请求控制工具</h2>
      <div class="demo-item">
        <label>防重复请求：</label>
        <button @click="testDeduplicateRequest">测试防重复请求</button>
        <span>{{ deduplicateResult }}</span>
      </div>
      <div class="demo-item">
        <label>缓存请求：</label>
        <button @click="testCachedRequest">测试缓存请求</button>
        <span>{{ cachedResult }}</span>
      </div>
      <div class="demo-item">
        <label>并发控制：</label>
        <button @click="testConcurrencyControl">测试并发控制</button>
        <span>{{ concurrencyResult }}</span>
      </div>
    </section>

    <!-- 树结构示例 -->
    <section class="demo-section">
      <h2>树结构工具</h2>
      <div class="demo-item">
        <label>数组转树：</label>
        <button @click="testArrayToTree">测试数组转树</button>
        <div v-if="treeResult" class="tree-result">
          <pre>{{ JSON.stringify(treeResult, null, 2) }}</pre>
        </div>
      </div>
      <div class="demo-item">
        <label>树节点查找：</label>
        <button @click="testFindTreeNode">测试节点查找</button>
        <span>{{ findNodeResult }}</span>
      </div>
      <div class="demo-item">
        <label>树节点统计：</label>
        <button @click="testTreeStats">测试树统计</button>
        <span>{{ treeStatsResult }}</span>
      </div>
    </section>

    <!-- HTTP请求示例 -->
    <section class="demo-section">
      <h2>HTTP请求工具</h2>
      <div class="demo-item">
        <label>GET请求：</label>
        <button @click="testGetRequest">测试GET请求</button>
        <span>{{ getRequestResult }}</span>
      </div>
      <div class="demo-item">
        <label>POST请求：</label>
        <button @click="testPostRequest">测试POST请求</button>
        <span>{{ postRequestResult }}</span>
      </div>
      <div class="demo-item">
        <label>文件上传：</label>
        <input type="file" @change="handleFileUpload" ref="fileInput" />
        <button @click="testUploadRequest">测试上传</button>
        <div v-if="uploadProgress !== null" class="upload-progress">
          上传进度: {{ uploadProgress }}%
        </div>
      </div>
      <div class="demo-item">
        <label>批量请求：</label>
        <button @click="testBatchRequest">测试批量请求</button>
        <span>{{ batchRequestResult }}</span>
      </div>
      <div class="demo-item">
        <label>请求配置：</label>
        <button @click="testHttpConfig">测试HTTP配置</button>
        <span>{{ httpConfigResult }}</span>
      </div>
    </section>

    <!-- 复制工具示例 -->
    <section class="demo-section">
      <h2>复制工具</h2>
      <div class="demo-item">
        <label>复制文本：</label>
        <input v-model="copyText" placeholder="输入要复制的文本" />
        <button @click="testCopyToClipboard">复制到剪贴板</button>
        <span>{{ copyResult }}</span>
      </div>
      <div class="demo-item">
        <label>复制选中文本：</label>
        <div class="selectable-text" @mouseup="handleTextSelection">
          这是一段可以选择并复制的文本。请选择这段文字，然后点击复制按钮。
        </div>
        <button @click="testCopySelectedText">复制选中文本</button>
        <span>{{ copySelectedResult }}</span>
      </div>
      <div class="demo-item">
        <label>选择复制提示：</label>
        <div class="selectable-text" @mouseup="showCopyTip">
          选择这段文字会显示复制提示
        </div>
        <span>{{ copyTipResult }}</span>
      </div>
    </section>

    <!-- JSON格式化工具示例 -->
    <section class="demo-section">
      <h2>JSON格式化工具</h2>
      <div class="demo-item">
        <label>标准化API响应：</label>
        <button @click="testStandardizeApiResponse">测试API响应标准化</button>
        <div v-if="standardizedResponse" class="json-result">
          <pre>{{ JSON.stringify(standardizedResponse, null, 2) }}</pre>
        </div>
      </div>
      <div class="demo-item">
        <label>格式化API数据：</label>
        <textarea v-model="apiDataInput" placeholder="输入API数据（JSON格式）" rows="4"></textarea>
        <button @click="testFormatApiData">格式化API数据</button>
        <div v-if="formattedApiData" class="json-result">
          <pre>{{ JSON.stringify(formattedApiData, null, 2) }}</pre>
        </div>
      </div>
      <div class="demo-item">
        <label>不同格式测试：</label>
        <button @click="testDifferentFormats">测试不同数据格式</button>
        <div v-if="formatTestResults" class="json-result">
          <div v-for="(result, key) in formatTestResults" :key="key">
            <h4>{{ key }}:</h4>
            <pre>{{ JSON.stringify(result, null, 2) }}</pre>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import ChicCore from 'chic-core';

export default {
  name: 'VueUtilsDemo',
  data() {
    return {
      email: 'test@example.com',
      storageKey: 'demo-key',
      storageValue: 'demo-value',
      loadedValue: '',
      originalArray: [1, 2, 2, 3, 3, 3, 4, 5],
      testObject: {
        name: 'John',
        age: 25,
        address: {
          city: 'New York',
          country: 'USA'
        }
      },
      uploadProgress: null,
      selectedFiles: [],
      validationResult: null,
      isDragOver: false,
      dropZoneController: null,
      deduplicateResult: '',
      cachedResult: '',
      concurrencyResult: '',
      treeResult: null,
      findNodeResult: '',
      treeStatsResult: '',
      getRequestResult: '',
      postRequestResult: '',
      uploadProgress: null,
      batchRequestResult: '',
      httpConfigResult: '',
      selectedFile: null,
      // 复制工具相关
      copyText: 'Hello World!',
      copyResult: '',
      copySelectedResult: '',
      copyTipResult: '',
      copyTipController: null,
      // JSON格式化工具相关
      standardizedResponse: null,
      apiDataInput: '{"name": "test", "value": 123}',
      formattedApiData: null,
      formatTestResults: null
    };
  },
  computed: {
    formattedDate() {
      return ChicCore.formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss');
    },
    relativeTime() {
      const oneHourAgo = new Date(Date.now() - 60 * 60 * 1000);
      return ChicCore.getRelativeTime(oneHourAgo);
    },
    capitalizedText() {
      return ChicCore.capitalize('hello world');
    },
    camelCaseText() {
      return ChicCore.camelCase('hello world example');
    },
    isEmailValid() {
      return ChicCore.isEmail(this.email);
    },
    uniqueArray() {
      return ChicCore.unique(this.originalArray);
    },
    groupedArray() {
      const users = [
        { name: 'John', age: 20, department: 'IT' },
        { name: 'Jane', age: 25, department: 'HR' },
        { name: 'Bob', age: 30, department: 'IT' }
      ];
      return ChicCore.groupBy(users, 'department');
    },
    formattedNumber() {
      return ChicCore.formatNumber(1234.56, {
        decimals: 2,
        thousandsSeparator: ','
      });
    },
    formattedCurrency() {
      return ChicCore.formatCurrency(1234.56, '¥', {
        decimals: 2
      });
    },
    formattedFileSize() {
      return ChicCore.formatFileSize(1048576); // 1MB
    }
  },
  mounted() {
    // 初始化拖拽上传区域
    this.initDropZone();
  },
  beforeDestroy() {
    // 清理拖拽控制器
    if (this.dropZoneController) {
      this.dropZoneController.destroy();
    }
    // 清理复制提示控制器
    if (this.copyTipController) {
      this.copyTipController.cleanup();
    }
  },
  methods: {
    initDropZone() {
      if (this.$refs.dropZone) {
        this.dropZoneController = ChicCore.createFileDropZone(this.$refs.dropZone, {
          onDrop: (files) => {
            console.log('拖拽文件:', files);
            this.selectedFiles = files;
          },
          onDragOver: () => {
            this.isDragOver = true;
          },
          onDragLeave: () => {
            this.isDragOver = false;
          }
        });
      }
    },
    downloadTextFile() {
      ChicCore.downloadTextFile('Hello World!', 'hello.txt');
    },
    downloadJSONFile() {
      const data = { name: 'Chic Core', version: '1.0.0', features: ['文件工具', '日期工具', '字符串工具'] };
      ChicCore.downloadJSONFile(data, 'chic-core-info.json');
    },
    handleFileUpload(event) {
      const files = Array.from(event.target.files);
      if (files.length > 0) {
        console.log('选择的文件:', files);
        this.selectedFiles = files;
        
        // 模拟上传进度
        this.uploadProgress = 0;
        const interval = setInterval(() => {
          this.uploadProgress += 10;
          if (this.uploadProgress >= 100) {
            clearInterval(interval);
            setTimeout(() => {
              this.uploadProgress = null;
            }, 1000);
          }
        }, 200);
      }
    },
    async selectFiles() {
      try {
        const files = await ChicCore.selectFiles({ 
          multiple: true, 
          accept: ['jpg', 'png', 'pdf', 'txt'] 
        });
        this.selectedFiles = Array.isArray(files) ? files : [files];
        console.log('选择的文件:', this.selectedFiles);
      } catch (error) {
        console.error('文件选择失败:', error);
      }
    },
    validateSelectedFile(event) {
      const file = event.target.files[0];
      if (file) {
        this.validationResult = ChicCore.validateFile(file, {
          allowedTypes: ['image/jpeg', 'image/png'],
          maxSize: 5 * 1024 * 1024, // 5MB
          allowedExtensions: ['jpg', 'jpeg', 'png']
        });
        console.log('文件验证结果:', this.validationResult);
      }
    },
    async testDeduplicateRequest() {
      let callCount = 0;
      const requestFn = async () => {
        callCount++;
        await new Promise(resolve => setTimeout(resolve, 100));
        return `请求结果 ${callCount}`;
      };

      const startTime = Date.now();
      const [result1, result2] = await Promise.all([
        ChicCore.deduplicateRequest('test-key', requestFn),
        ChicCore.deduplicateRequest('test-key', requestFn)
      ]);
      const endTime = Date.now();

      this.deduplicateResult = `结果1: ${result1}, 结果2: ${result2}, 调用次数: ${callCount}, 耗时: ${endTime - startTime}ms`;
    },
    async testCachedRequest() {
      let callCount = 0;
      const requestFn = async () => {
        callCount++;
        return `缓存结果 ${callCount}`;
      };

      const result1 = await ChicCore.cachedRequest('cache-key', requestFn);
      const result2 = await ChicCore.cachedRequest('cache-key', requestFn);

      this.cachedResult = `结果1: ${result1}, 结果2: ${result2}, 调用次数: ${callCount}`;
    },
    async testConcurrencyControl() {
      const results = [];
      const createRequest = (id, delay) => async () => {
        await new Promise(resolve => setTimeout(resolve, delay));
        results.push(id);
        return `请求 ${id}`;
      };

      const startTime = Date.now();
      await Promise.all([
        ChicCore.controlledRequest(createRequest(1, 200), { priority: 1 }),
        ChicCore.controlledRequest(createRequest(2, 100), { priority: 2 }),
        ChicCore.controlledRequest(createRequest(3, 150), { priority: 0 })
      ]);
      const endTime = Date.now();

      this.concurrencyResult = `执行顺序: ${results.join(', ')}, 耗时: ${endTime - startTime}ms`;
    },
    testArrayToTree() {
      const testData = [
        { id: 1, name: '根节点1', parentId: null },
        { id: 2, name: '子节点1', parentId: 1 },
        { id: 3, name: '子节点2', parentId: 1 },
        { id: 4, name: '孙节点1', parentId: 2 },
        { id: 5, name: '根节点2', parentId: null }
      ];

      this.treeResult = ChicCore.arrayToTree(testData);
    },
    testFindTreeNode() {
      if (!this.treeResult) {
        this.testArrayToTree();
      }

      const node = ChicCore.findTreeNode(this.treeResult, { id: 4 });
      this.findNodeResult = node ? `找到节点: ${node.name}` : '未找到节点';
    },
    testTreeStats() {
      if (!this.treeResult) {
        this.testArrayToTree();
      }

      const depth = ChicCore.getTreeDepth(this.treeResult);
      const count = ChicCore.getTreeNodeCount(this.treeResult);
      const leaves = ChicCore.getTreeLeaves(this.treeResult);

      this.treeStatsResult = `深度: ${depth}, 节点数: ${count}, 叶子节点: ${leaves.length}`;
    },
    async testGetRequest() {
      try {
        // 模拟GET请求
        const response = await ChicCore.httpClient.get('/api/users', { page: 1, limit: 10 });
        this.getRequestResult = `GET请求成功: ${JSON.stringify(response.data)}`;
      } catch (error) {
        this.getRequestResult = `GET请求失败: ${error.message}`;
      }
    },
    async testPostRequest() {
      try {
        // 模拟POST请求
        const data = { name: 'Test User', email: 'test@example.com' };
        const response = await ChicCore.httpClient.post('/api/users', data);
        this.postRequestResult = `POST请求成功: ${JSON.stringify(response.data)}`;
      } catch (error) {
        this.postRequestResult = `POST请求失败: ${error.message}`;
      }
    },
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
    },
    async testUploadRequest() {
      if (!this.selectedFile) {
        alert('请先选择文件');
        return;
      }

      try {
        const formData = new FormData();
        formData.append('file', this.selectedFile);

        const response = await ChicCore.httpClient.upload('/api/upload', formData, {
          onProgress: (percent) => {
            this.uploadProgress = percent;
          }
        });

        this.uploadProgress = null;
        alert(`上传成功: ${JSON.stringify(response.data)}`);
      } catch (error) {
        this.uploadProgress = null;
        alert(`上传失败: ${error.message}`);
      }
    },
    async testBatchRequest() {
      try {
        const requests = [
          { method: 'get', url: '/api/users/1' },
          { method: 'get', url: '/api/users/2' },
          { method: 'get', url: '/api/users/3' }
        ];

        const result = await ChicCore.httpClient.batch(requests, { concurrency: 2 });
        this.batchRequestResult = `批量请求完成: 成功${result.successCount}个, 失败${result.errorCount}个`;
      } catch (error) {
        this.batchRequestResult = `批量请求失败: ${error.message}`;
      }
    },
    testHttpConfig() {
      // 创建自定义HTTP客户端
      const customClient = ChicCore.createHttpClient({
        baseURL: 'https://api.example.com',
        timeout: 15000,
        enableCache: true,
        enableLogging: true
      });

      // 添加请求拦截器
      customClient.config.addRequestInterceptor((config) => {
        config.headers['X-Custom-Header'] = 'ChicCore';
        return config;
      });

      // 添加响应拦截器
      customClient.config.addResponseInterceptor((response) => {
        console.log('响应拦截器:', response);
        return response;
      });

      // 添加错误处理器
      customClient.config.addErrorHandler(404, (error) => {
        console.log('404错误处理:', error);
      });

      this.httpConfigResult = `自定义HTTP客户端创建成功: ${customClient.config.baseURL}`;
    },
    testDeepClone() {
      const cloned = ChicCore.deepClone(this.testObject);
      cloned.name = 'Jane';
      cloned.address.city = 'Los Angeles';
      
      this.deepCloneResult = `原对象城市: ${this.testObject.address.city}, 克隆对象城市: ${cloned.address.city}`;
    },
    saveToStorage() {
      const success = ChicCore.setLocalStorage(this.storageKey, this.storageValue);
      if (success) {
        alert('保存成功！');
      } else {
        alert('保存失败！');
      }
    },
    loadFromStorage() {
      this.loadedValue = ChicCore.getLocalStorage(this.storageKey, '未找到数据');
    },
    // 复制工具方法
    testCopyToClipboard() {
      ChicCore.copyToClipboard(
        this.copyText,
        (message) => {
          this.copyResult = `✓ ${message}`;
          setTimeout(() => {
            this.copyResult = '';
          }, 3000);
        },
        (error) => {
          this.copyResult = `✗ ${error}`;
          setTimeout(() => {
            this.copyResult = '';
          }, 3000);
        }
      );
    },
    handleTextSelection() {
      // 处理文本选择事件
      setTimeout(() => {
        const selection = window.getSelection();
        if (selection && selection.toString().trim()) {
          this.copySelectedResult = `已选择: "${selection.toString()}"`;
        } else {
          this.copySelectedResult = '';
        }
      }, 100);
    },
    testCopySelectedText() {
      ChicCore.copySelectedText(
        (message) => {
          this.copySelectedResult = `✓ ${message}`;
          setTimeout(() => {
            this.copySelectedResult = '';
          }, 3000);
        },
        (error) => {
          this.copySelectedResult = `✗ ${error}`;
          setTimeout(() => {
            this.copySelectedResult = '';
          }, 3000);
        }
      );
    },
    showCopyTip() {
      // 清理之前的提示
      if (this.copyTipController) {
        this.copyTipController.cleanup();
      }
      
      // 创建复制提示
      this.copyTipController = ChicCore.createSelectionCopyTip(() => {
        ChicCore.copySelectedText(
          (message) => {
            this.copyTipResult = `✓ ${message}`;
            setTimeout(() => {
              this.copyTipResult = '';
            }, 3000);
          },
          (error) => {
            this.copyTipResult = `✗ ${error}`;
            setTimeout(() => {
              this.copyTipResult = '';
            }, 3000);
          }
        );
      });
      
      this.copyTipResult = '提示已显示，请选择文字并点击复制按钮';
    },
    // JSON格式化工具方法
    testStandardizeApiResponse() {
      // 测试不同格式的数据
      const testData = [
        { name: 'John', age: 25 }, // 普通对象
        [1, 2, 3, 4, 5], // 数组
        'Hello World', // 字符串
        null, // null值
        { code: 200, message: 'success', data: { id: 1 } } // 已经是标准格式
      ];
      
      const results = {};
      testData.forEach((data, index) => {
        results[`测试数据${index + 1}`] = ChicCore.standardizeApiResponse(data);
      });
      
      this.standardizedResponse = results;
    },
    testFormatApiData() {
      try {
        let data;
        if (this.apiDataInput.trim()) {
          // 尝试解析JSON
          try {
            data = JSON.parse(this.apiDataInput);
          } catch (e) {
            // 如果不是JSON，直接使用字符串
            data = this.apiDataInput;
          }
        } else {
          data = { message: '请输入数据' };
        }
        
        this.formattedApiData = ChicCore.formatApiData(data);
      } catch (error) {
        this.formattedApiData = { error: error.message };
      }
    },
    testDifferentFormats() {
      const testCases = {
        '字符串格式': '{"name": "test", "value": 123}',
        '对象格式': { name: 'test', value: 123 },
        '数组格式': [1, 2, 3, 4, 5],
        '嵌套对象': { 
          user: { 
            id: 1, 
            profile: { 
              name: 'John', 
              email: 'john@example.com' 
            } 
          } 
        },
        '空值': null,
        '空字符串': '',
        '数字': 12345,
        '布尔值': true
      };
      
      const results = {};
      Object.keys(testCases).forEach(key => {
        results[key] = ChicCore.formatApiData(testCases[key]);
      });
      
      this.formatTestResults = results;
    }
  }
};
</script>

<style scoped>
.vue-utils-demo {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.demo-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.demo-section h2 {
  margin-top: 0;
  color: #333;
  border-bottom: 2px solid #007bff;
  padding-bottom: 10px;
}

.demo-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.demo-item label {
  font-weight: bold;
  min-width: 120px;
}

.demo-item input {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.demo-item button {
  padding: 5px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.demo-item button:hover {
  background-color: #0056b3;
}

.valid {
  color: #28a745;
  font-weight: bold;
}

.invalid {
  color: #dc3545;
  font-weight: bold;
}

pre {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}

.upload-progress {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #e3f2fd;
  border-radius: 4px;
  color: #1976d2;
}

.drop-zone {
  width: 100%;
  height: 100px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
  transition: all 0.3s ease;
  cursor: pointer;
}

.drop-zone.drag-over {
  border-color: #007bff;
  background-color: #e3f2fd;
  color: #007bff;
}

.drop-zone:hover {
  border-color: #007bff;
  background-color: #f8f9fa;
}

.tree-result {
  margin-top: 10px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 10px;
  background-color: #f8f9fa;
}

.selectable-text {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  cursor: text;
  user-select: text;
  margin: 5px 0;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.selectable-text:hover {
  background-color: #f0f0f0;
}

.json-result {
  margin-top: 10px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 10px;
  background-color: #f8f9fa;
}

.json-result h4 {
  margin: 10px 0 5px 0;
  color: #333;
  font-size: 14px;
}

.json-result pre {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: monospace;
  resize: vertical;
}
</style>
